<template>
  <view class="modify-phone">
    <view class="form">
      <view class="form-item l-border-bottom">
        <u--input
          placeholder="请输入新手机号"
          border="none"
          v-model="form.value"
        ></u--input>
      </view>
      <view class="form-item">
        <u-input
          placeholder="请输入短信验证码"
          border="none"
          v-model="form.value"
        >
          <template slot="suffix">
            <u-code
              ref="uCode"
              startText="发送验证码"
              endText="重新发送"
              @change="codeChange"
              seconds="60"
              changeText="X秒"
            ></u-code>
            <view class="tip" @click="getCode">
              {{ tips }}
            </view>
          </template>
        </u-input>
      </view>
    </view>
    <view class="submit">确认修改</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tips: "",
      value: "",
    };
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast("验证码已发送");
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast("倒计时结束后再发送");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.modify-phone {
  .form {
    margin-top: 28rpx;
    background: #fff;
  }
  .form-item {
    padding: 30rpx;
  }
  .tip {
    font-size: 28rpx;
    color: #138e57;
  }

  .submit {
    background: linear-gradient(83deg, #48b453 0%, #2c9f79 100%);
    border-radius: 200rpx;
    font-size: 32rpx;
    color: #ffffff;
    padding: 26rpx 0;
    text-align: center;
    margin: 80rpx 70rpx 0 70rpx;
  }
}
</style>
